<template>
  <div>
    <button @click="isflag = !isflag">点击一下</button>
    <transition>
      <div
        v-show="isflag"
        class="animate__animated"
        :class="isflag ? 'animate__backInUp' : 'animate__backOutDown'"
      >
        我是动画大家
      </div>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
  data() {
    return {
      isflag: true,
    };
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0 auto;
}
.animate__animated {
  width: 100px;
  height: 100px;
  background-color: brown;
  color: white;
}
</style>